<template >
  <div class="bg">
    <div class="container-blue">
      <!-- 账号模块 -->
      <AccountView></AccountView>
      <!-- 账号模块 -->
      <!-- 通行证模块 -->
      <PassView></PassView>
      <!-- 通行证模块 -->
      <div class="xian"></div>
      <!-- 任务模块-->
      <TaskModule></TaskModule>
      <!-- 任务模块 -->
      <div class="xian"></div>
      <!-- 购买商品模块 -->
      <GoodsBuy></GoodsBuy>
      <!-- 购买商品模块 -->
      <div class="xian"></div>
      <!-- 购买奖励领取模块 -->
      <Reward></Reward>
      <!-- 购买奖励领取模块 -->
      <div class="xian"></div>
      <Rules></Rules>
    </div>
  </div>
</template>
<script>
import PassView from "../components/pass.vue";
import AccountView from "../components/account.vue";
import TaskModule from "../components/TaskModule.vue";
import GoodsBuy from "../components/GoodsBuy.vue";
import Reward from "../components/BuyReward.vue";
import Rules from "../components/rules.vue";
export default {
  name: "BlueView",
  data() {
    return {};
  },

  mounted() {},
  methods: {},
  components: {
    PassView,
    AccountView,
    TaskModule,
    GoodsBuy,
    Reward,
    Rules,
  },
};
</script>
<style>
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: linear-gradient(180deg, #81bfe8 0%, #10213f 100%) !important;
}
.container-blue {
  width: 1200px;
  height: 2883px;
  margin: 0 auto;
  background: url(@/assets/blue.jpg);
  padding-top: 95px;
}
/* 样式通用 */
.title {
  width: 100%;
  text-align: center;
  font-size: 58px;
  font-family: "Microsoft YaHei";
  text-align: center;
  background-image: linear-gradient(0deg, #2495e0, #10213f);
  background-clip: text;
  color: transparent;
}
.account {
  width: 614px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  background: url(@/assets/account.png);
  margin: 0 auto;
  position: relative;
  margin-bottom: 15px;
}
.account .active {
  width: 141px;
  height: 164px;
  background: url(@/assets/hdzx.png);
  display: block;
  text-align: center;
  font-size: 14px;
  text-decoration: underline;
  color: #fbc91d;
  font-family: Microsoft YaHei;
  position: absolute;
  top: -40px;
  right: -157px;
  z-index: 1;
}
.account .active:hover {
  background: url(@/assets/hdzx-hover.png);
}
.account img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 16px;
  left: 15px;
}
.account span {
  color: #fff;
  font-size: 16px;
  font-family: "Microsoft YaHei";
}
.account .backMap {
  width: 82px;
  height: 19px;
  background: url(@/assets/backMap2.png);
  position: absolute;
  right: 18px;
  top: 45px;
}
.advanced_box {
  width: 972px;
  height: 489px;
  background: url(@/assets/advanced_box2.png);
  margin: 0 auto;
}
.advanced_box_hd {
  width: 100%;
  height: 96px;
  position: relative;
  margin-bottom: 2px;
}
.lev-bg {
  width: 76px;
  height: 79px;
  line-height: 83px;
  text-align: center;
  background: url(@/assets/lev-bg.png);
  position: absolute;
  left: 72px;
  top: 24px;
  font-size: 28px;
  color: #fff;
  font-weight: bold;
}
.advanced_lev_box {
  position: absolute;
  left: 172px;
  top: 40px;
  color: #fff;
  font-size: 16px;
  font-family: "Microsoft YaHei";
}
.jianyan {
  position: absolute;
  right: 0px;
  top: 6px;
  color: #f3c263;
  font-family: "Microsoft YaHei";
  font-size: 14px;
}
.jianyan i.jy-icon-sm {
  width: 25px;
  height: 19px;
  display: inline-block;
  background: url(@/assets/jy-icon-sm.png);
  vertical-align: middle;
  margin-right: 5px;
}
.advanced_lev_box p {
  color: #fefefe;
  font-size: 16px;
  font-family: "Microsoft YaHei";
  margin-bottom: 10px;
}
.advanced_progress {
  width: 313px;
  height: 9px;
  background-color: #053249;
  border-radius: 5px;
  position: relative;
}
.advanced_progress span {
  width: 20%;
  height: 9px;
  background-color: #ffca63;
  border-radius: 5px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.reward-time {
  font-size: 16px;
  color: #ffca63;
  position: absolute;
  right: 57px;
  top: 46px;
}
.reward-time span {
  color: #fff;
  margin-left: 5px;
}
.advanced_box_main {
  width: 850px;
  height: 356px;
  margin: 0 auto;
  position: relative;
}
.advanced_box_main a.left-raw {
  width: 46px;
  height: 76px;
  background: url(@/assets/left-raw.png);
  position: absolute;
  left: 161px;
  top: 129px;
  cursor: pointer;
}
.advanced_box_main a.left-raw:hover {
  background: url(@/assets/left-raw-hover.png);
}
.advanced_box_main a.right-raw {
  width: 46px;
  height: 76px;
  background: url(@/assets/right-raw.png);
  position: absolute;
  right: 16px;
  top: 129px;
  cursor: pointer;
}
.advanced_box_main a.right-raw:hover {
  background: url(@/assets/right-raw-hover.png);
}
.advanced_box_main_left {
  width: 151px;
  height: 356px;
  float: left;
}
.advanced_common {
  width: 151px;
  height: 166px;
  position: relative;
}
.advanced_common .advanced_common_img {
  width: 127px;
  height: 138px;
  background: url(@/assets/advanced_common_img.png);
  position: absolute;
  top: 16px;
  left: 11px;
  z-index: 1;
}
.advanced_common_name {
  position: absolute;
  bottom: 8px;
  left: 11px;
  width: 127px;
  text-align: center;
  font-size: 18px;
  color: #70ed9f;
  font-family: "Microsoft YaHei";
}
.advanced_globa {
  width: 151px;
  height: 190px;
  position: relative;
}
.advanced_globa_img {
  width: 151px;
  height: 138px;
  background: url(@/assets/advanced_globa_img.png);
  position: absolute;
  top: 30px;
  left: 0px;
  z-index: 1;
}
.advanced_globa_name {
  position: absolute;
  bottom: 8px;
  left: 11px;
  width: 137px;
  text-align: center;
  font-size: 18px;
  color: #77f1ff;
  font-family: "Microsoft YaHei";
}
.advanced_box_main_right {
  width: 564px;
  height: 358px;
  float: left;
  margin-left: 64px;
  position: relative;
  overflow: hidden;
  zoom: 1;
}
.advanced_box_main_right ul {
  width: 99999999px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.advanced_box_main_right ul li {
  width: 105px;
  height: 358px;
  float: left;
  margin-right: 10px;
}
.advanced_box_main_right ul li .common_bg {
  width: 105px;
  height: 169px;
  background: url(@/assets/blue-common.png);
  position: relative;
}
.advanced_box_main_right ul li .common_bg img {
  width: 68px;
  height: 68px;
  position: absolute;
  top: 36px;
  left: 50%;
  margin-left: -34px;
}
.advanced_box_main_right ul li .common_bg .common_name {
  width: 68px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  font-family: "Microsoft YaHei";
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  margin-left: -34px;
  top: 110px;
}
.advanced_box_main_right ul li .common_bg .common_btn {
  width: 69px;
  height: 17px;
  border-radius: 8px;
  position: absolute;
  left: 50%;
  margin-left: -34px;
  bottom: 22px;
  text-align: center;
  background-color: #1d5149;
  font-size: 12px;
  color: #9bfff9;
  cursor: pointer;
}
.advanced_box_main_right ul li .common_bg .common_btn:hover {
  background-color: #42b9a7;
  transition: 0.2s;
  color: #dafffd;
}
.advanced_box_main_right ul li .common_bg .common_btn_has {
  background-color: #75837a;
  color: #81b7ba;
}
.advanced_box_main_right ul li .common_bg .lev {
  width: 23px;
  height: 26px;
  line-height: 26px;
  position: absolute;
  left: 50%;
  margin-left: -12px;
  top: 0px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  font-family: "Microsoft YaHei";
}
.advanced_box_main_right ul li .globa_bg {
  width: 105px;
  height: 186px;
  background: url(@/assets/blue-globa.png);
  position: relative;
}
.advanced_box_main_right ul li .globa_bg img {
  width: 68px;
  height: 68px;
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -34px;
}
.advanced_box_main_right ul li .globa_bg .common_name {
  width: 68px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  font-family: "Microsoft YaHei";
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  margin-left: -34px;
  top: 114px;
}
.advanced_box_main_right ul li .globa_bg .common_btn {
  width: 69px;
  height: 17px;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  margin-left: -34px;
  bottom: 33px;
  text-align: center;
  background-color: #29778c;
  font-size: 12px;
  color: #9bfff9;
  cursor: pointer;
}
.advanced_box_main_right ul li .globa_bg .common_btn:hover {
  background-color: #3cc5e7;
  color: #dbfffd;
  transition: 0.2s;
}
.xian {
  width: 1032px;
  height: 40px;
  margin: 0 auto;
  background: url(@/assets/xian.png);
}
.task_box_blue {
  width: 881px;
  overflow: hidden;
  zoom: 1;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 20px;
}
.task_box_blue_hd {
  width: 100%;
  text-align: center;
}
.task_box_blue_hd span {
  width: 198px;
  height: 48px;
  line-height: 50px;
  display: inline-block;
  font-size: 20px;
  color: #fff;
  font-family: "Microsoft YaHei";
  background: url(@/assets/tab-cm.png);
}
.task_box_blue_hd span.current {
  background: url(@/assets/tab-cur.png);
  color: #ffe990;
}
.task_box_blue_main {
  width: 881px;
  height: 403px;
  background: url(@/assets/task_box_blue.png);
}
.task_box_blue_main_hd {
  width: 828px;
  height: 64px;
  line-height: 64px;
  margin: 0 auto;
}
.rush-bg {
  width: 234px;
  height: 25px;
  line-height: 25px;
  text-align: left;
  text-indent:5px;
  color:#fff;
  font-size:14px;
  float: left;
  background: url(@/assets/rush-bg.png);
  margin-top: 16px;
  margin-left: 12px;
}
.rush-bg span{
    float:left;
    
}
.rush-bg span i{
    color:#ffca63;
    margin:0 5px;
}
.rush-bg .rush-progress{
    width:130px;
    height:12px;
    background-color: #000;
    float: left;
    margin-top:6px;
    position: relative;
}
.rush-bg .rush-progress em{
    height: 12px;
    background-color: #ffca63;
    position: absolute;
    top:0px;
    left:0px;
}
.rush_btn {
  width: 18px;
  height: 20px;
  background: url(@/assets/rush-cm.png);
  float: left;
  margin-top: 18px;
  margin-left: 12px;
}
.limit-time {
  height: 64px;
  line-height: 64px;
  float: right;
  color: #f5c358;
  font-size: 16px;
  font-family: "Microsoft YaHei";
}
.limit-time span {
  color: #fff;
  margin-left: 5px;
}
.task_box_blue_main ul {
  width: 804px;
  height: 310px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 auto;
}
.task_box_blue_main ul li {
  width: 802px;
  overflow: hidden;
  zoom: 1;
  margin-bottom: 5px;
}
.parent-task-box {
  width: 762px;
  height: 37px;
  background: rgba(14, 16, 15, 0.4);
  border-radius: 8px;
  padding: 10px 20px 10px 20px;
  position: relative;
}
.child-task-box {
  width: 777px;
  overflow: hidden;
  zoom: 1;
}
.child-task-box-item {
  width: 727px;
  height: 46px;
  line-height: 46px;
  color: #ffca63;
  font-size: 14px;
  background: rgba(14, 16, 15, 0.4);
  border-radius: 8px;
  padding: 0px 25px;
  margin-bottom: 5px;
}
.child-task-box-item span {
  float: left;
  margin-right: 40px;
}
.child-task-box-item span i.jinyan-sm {
  width: 25px;
  height: 19px;
  display: inline-block;
  background: url(@/assets/jy-icon-sm.png);
  vertical-align: middle;
  margin-right: 5px;
}
.child-task-box-item a.task_item_wc {
  float: right;
  color: #f5c260;
  font-size: 14px;
  font-family: "Microsoft YaHei";
}
.task_box_item_left {
  width: 40px;
  height: 37px;
  float: left;
}
.task_box_item_left .jy-icon-lg {
  width: 25px;
  height: 19px;
  margin: 0 auto;
  background: url(@/assets/jy-icon-lg.png);
}
.task_box_item_left p {
  width: 40px;
  text-align: center;
  color: #ffca63;
  font-size: 16px;
}
.task_box_item_center {
  width: 605px;
  height: 37px;
  float: left;
  margin-left: 23px;
}
.task_box_item_center .task_num {
  color: #fff;
  font-size: 16px;
  font-family: "Microsoft YaHei";
  margin-bottom: 2px;
}
.task_box_item_center .task_name {
  color: #e0b35c;
  font-size: 12px;
  font-family: "Microsoft YaHei";
}
.task_lq {
  width: 84px;
  height: 23px;
  display: block;
  float: left;
  line-height: 23px;
  text-align: center;
  background-color: #29778c;
  font-size: 14px;
  color: #9bfff9;
  font-family: "Microsoft YaHei";
  border-radius: 2px;
  margin-top: 8px;
}
.task_lq:hover {
  background-color: #54cff0;
  transition: 0.2s;
  color: #d2fffc;
}
.goods_buy_box {
  width: 818px;
  height: 386px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  position: relative;
}
a.gmjl {
  position: absolute;
  right: 0px;
  top: 0px;
  font-size: 16px;
  color: #ffdb4d;
  font-family: "Microsoft YaHei";
  text-decoration: underline;
  z-index: 1;
}
.goods_buy_box_item {
  width: 281px;
  height: 442px;
  background: url(@/assets/goods_buy_box_item.png);
  position: relative;
}
.goods_buy_box_item img {
  width: 124px;
  height: 124px;
  position: absolute;
  top: 88px;
  left: 50%;
  margin-left: -56px;
  border: 2px solid #202f2d;
}
.goods_buy_box_item p {
  width: 140px;
  text-align: center;
  color: #1c2e2e;
  font-size: 12px;
  font-family: "Microsoft YaHei";
  position: absolute;
  top: 220px;
  left: 50%;
  margin-left: -62px;
}
.goods_buy_box_item h5 {
  width: 140px;
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  color: #fff;
  font-family: "Microsoft YaHei";
  position: absolute;
  top: 240px;
  left: 50%;
  margin-left: -62px;
}
.goods_buy_box_item .price {
  width: 140px;
  text-align: center;
  font-size: 20px;
  font-weight: normal;
  color: #ffd25a;
  font-family: "Microsoft YaHei";
  position: absolute;
  top: 268px;
  left: 50%;
  margin-left: -62px;
  -webkit-text-stroke: 1px #3d2d08;
  font-weight: bold;
}
.number-box {
  width: 140px;
  position: absolute;
  top: 298px;
  left: 50%;
  margin-left: -62px;
  display: flex;
  justify-content: space-between;
}
.number-box .remove {
  width: 28px;
  height: 23px;
  background: url(@/assets/remove.png);
}
.number-box .remove:hover {
  background: url(@/assets/remove-hover.png);
}
.number-box input {
  width: 77px;
  height: 23px;
  text-align: center;
  line-height: 23px;
  color: #fff;
  font-size: 16px;
  background: url(@/assets/inpt.png);
}
.number-box .add {
  width: 28px;
  height: 23px;
  background: url(@/assets/add.png);
}
.number-box .add:hover {
  background: url(@/assets/add-hover.png);
}
.goods_lq {
  width: 88px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 12px;
  color: #9bfff9;
  font-size: 12px;
  position: absolute;
  left: 50%;
  margin-left: -37px;
  bottom: 91px;
  background-color: #29778c;
}
.goods_gm {
  width: 88px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 12px;
  color: #fad177;
  font-size: 12px;
  position: absolute;
  left: 50%;
  margin-left: -37px;
  bottom: 91px;
  background-color: #d5781d;
}
.goods_gm:hover {
  background-color: #f3be2f;
  transition: 0.2s;
  color: #fff;
}
.buy_reward_box {
  width: 892px;
  height: 501px;
  background: url(@/assets/buy_reward_box_blue.png);
  margin: 0 auto;
  margin-top: 20px;
  padding: 60px;
  margin-bottom: 20px;
  position: relative;
}
.buy_reward_box a.lqjl {
  float: right;
  color: #e68f31;
  font-family: "Microsoft YaHei";
  position: relative;
  top: -10px;
}
a.jl_num {
  float: left;
  color: #f5ad60;
  font-family: "Microsoft YaHei";
  position: relative;
  top: -10px;
}
.buy_reward_box ul {
  width: 892px;
  height: 501px;
  overflow-x: hidden;
  overflow-y: auto;
}
.buy_reward_box p.tips {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
  color: #e68f31;
  position: relative;
}
.buy_reward_box p.tips::after {
  content: "";
  width: 5px;
  height: 28px;
  background-color: #e68f31;
  position: absolute;
  left: -13px;
  top: 0px;
}
.buy_reward_box_item {
  width: 851px;
  height: 68px;
  background: rgba(14, 16, 15, 0.4);
  border-radius: 18px;
  padding: 25px 0px 27px 34px;
  display: flex;
  justify-content: flex-start;
}
.buy_reward_box_item img {
  width: 68px;
  height: 68px;
}
.buy_reward_box_item_center {
  width: 608px;
  height: 68px;
  padding-left: 12px;
}
.buy_reward_box_item_center p.buy_name {
  color: #fefefe;
  font-size: 20px;
  margin-bottom: 15px;
}
.buy_reward_box_item_center p.buy_info {
  font-size: 14px;
  color: #63aae5;
  font-family: "Microsoft YaHei";
}
.buy_reward_box_item_right {
  width: 128px;
  height: 68px;
}
.buy_reward_box_item_right p {
  font-size: 14px;
  color: #6cb9fa;
  font-family: "Microsoft YaHei";
  margin-bottom: 10px;
}
.buy_reward_box_item_right p em {
  font-size: 24px;
  color: #ffdb4d;
}
.buy_reward_box_item_right a.ljlq {
  width: 88px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: #29778c;
  color: #9bfff9;
  font-family: "Microsoft YaHei";
  display: block;
  font-size: 12px;
  border-radius: 12px;
}
.buy_reward_box_item_right a.ljlq:hover {
  background-color: #54cff0;
  color: #d2fffc;
  transition: 0.2s;
}
.rules {
  width: 897px;
  height: 363px;
  margin: 0 auto;
  margin-top: 20px;
}
.rules p {
  font-size: 16px;
  color: #fff;
  font-family: "Microsoft YaHei";
  margin-bottom: 15px;
}
/* 样式通用 */

/* 我的领取纪录 */

.model2 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.bg .inModel2 {
  width: 849px;
  height: 500px;
  background: url(https://img.5211game.com/5211/Act/2019/actMonthModel/images/blue-kuang.png);
  position: absolute;
  top: 50%;
  margin-top: -260px;
  left: 50%;
  margin-left: -425px;
  padding-top: 36px;
}

.inModel2 h1 {
  text-align: center;
  margin-bottom: 20px;
  font-family: "微软雅黑";
  color: #fff;
}

.closeBTN {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 26px;
  position: absolute;
  top: 18px;
  right: 24px;
  cursor: pointer;
  font-family: "微软雅黑";
  color: #fff;
}

.tbl_top {
  width: 500px;
  overflow: hidden;
  zoom: 1;
  margin: 0 auto;
}

.tbl_top span {
  font-size: 14px;
  width: 150px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  display: block;
  float: left;
  font-family: "微软雅黑";
}

.tbl_top span.current {
  width: 200px;
}

.tbl ul {
  width: 500px;
  height: 280px;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 我的领取纪录 */

/*活动中心弹窗样式*/

.bg .activeMain {
  width: 849px;
  height: 500px;
  background: url(https://img.5211game.com/5211/Act/2019/actMonthModel/images/blue-kuang.png);
  position: absolute;
  top: 50%;
  margin-top: -260px;
  left: 50%;
  margin-left: -425px;
  padding-top: 36px;
}

.activeMain i.close {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: 15px;
  right: 18px;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
}

.activeMain h1 {
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Microsoft YaHei;
  margin-bottom: 20px;
}

.bg .activeMain ul {
  width: 683px;
  height: 400px;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.bg .activeMain ul li {
  width: 633px;
  height: 51px;
  background: url(https://img.5211game.com/5211/Act/2019/actMonthModel/images/blue-li.png);
  position: relative;
  margin-bottom: 10px;
  padding: 15px;
  padding-left: 35px;
}

.activeMain ul li p {
  font-family: Microsoft YaHei;
  font-size: 14px;
  color: #ff7c72;
  margin-bottom: 10px;
}

.activeMain ul li h5 {
  font-family: Microsoft YaHei;
  font-size: 16px;
  color: #fff;
}

.current-act {
  width: 21px;
  height: 81px;
  display: block;
  background: url(https://img.5211game.com/5211/Act/2019/actMonthModel/images/current-act.png);
  position: absolute;
  top: 0px;
  left: 9px;
}

.activeMain ul li a.ljcy {
  width: 97px;
  height: 27px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-family: Microsoft YaHei;
  display: block;
  background: url(https://img.5211game.com/5211/Act/2019/actMonthModel/images/ljcy.png);
  border-radius: 4px;
  position: absolute;
  top: 28px;
  right: 16px;
}

.activeMain ul li a.ljcy:hover {
  background: url(https://img.5211game.com/5211/Act/2019/actMonthModel/images/ljcy-hover.png);
}

/*活动中心弹窗样式*/
</style>